<template>
  <div class="comment-pen">
    <div class="close-btn clearfix">
      <span @click="hideCommentPen()">取消</span>
    </div>
    <!-- v-model="comment.Comment_content_html" -->
    <div class="profile" v-if="false">
      <div v-if="!visitor.edit" class="profile-setting" @click="editProfile()">
        <strong class="name">{{ visitor.nickName }}</strong>
        <span class="setting" v-if="!user.name"
          ><i class="iconfont icon-set"></i><span>设置账户信息</span></span
        >
      </div>
      <div class="profile-input row justify-between" v-else>
        <q-input placeholder="昵称" v-model="visitor.nickName" :dense="false">
          <template v-slot:before> <q-icon name="mdi-account" /> </template
        ></q-input>
        <q-input placeholder="邮箱" v-model="visitor.mail" :dense="false">
          <template v-slot:before> <q-icon name="mdi-email" /> </template
        ></q-input>
        <q-input placeholder="网址" v-model="visitor.site" :dense="false">
          <template v-slot:before> <q-icon name="mdi-web" /> </template
        ></q-input>
        <span class="column justify-center">
          <q-btn
            size="xs"
            round
            color="primary"
            icon="mdi-check"
            @click="editProfile"
        /></span>
        <!-- <el-input
          placeholder="昵称"
          prefix-icon="el-icon-user"
          v-model="visitor.nickName"
        />
        <el-input
          placeholder="邮箱"
          prefix-icon="fa fa-envelope-o"
          v-model="visitor.mail"
        />
        <el-input
          placeholder="网址"
          prefix-icon="fa fa-television"
          v-model="visitor.site"
        /> -->
      </div>
    </div>
    <div class="z-head">
      <q-btn-toggle
        push
        glossy
        size="sm"
        v-model="mode"
        toggle-color="primary"
        :options="[
          { label: '编辑', value: 'edit' },
          { label: '预览', value: 'preview' }
        ]"
      />
    </div>
    <div class="z-body clearfix">
      <!-- 编辑 -->
      <div class="cu-input-wrapper" v-show="mode == 'edit'">
        <!-- <auto-Textarea
          :placeholder="placeHolder"
          :className="'z-input'"
          v-model="inputValue"
        >
          </auto-Textarea> -->
        <q-input
          v-model="inputValue"
          filled
          type="textarea"
          :placeholder="placeHolder"
        />

        <!-- <textarea
          name="comment"
          class="z-input"
          rows="3"
          placeholder="留下你的评论|支持Markdown语法"
          v-model="inputValue"
        ></textarea> -->
      </div>
      <!-- 预览 -->
      <div class=" z-preview marked highlight" v-show="mode == 'preview'">
        <div
          v-html="previewContent"
          ref="preview-content"
          class="preview-content "
        ></div>
      </div>
    </div>
    <div class="z-footer clearfix">
      <div class="toolbox clearfix" v-show="mode == 'edit'">
        <span
          data-action="emoji"
          class="tool-item"
          title="插入表情"
          @click.self="showCommentEmoji = !showCommentEmoji"
        >
          <q-icon name="mdi-emoticon-outline" />表情

          <transition name="fade">
            <vue-emoji
              :showEmoji="showCommentEmoji"
              @select="emojiSelected"
              @close="closeEmoji"
            ></vue-emoji>
          </transition>
        </span>
        <!-- @click="ShowModal('image', '插入图片')" -->
        <!-- <span class="tool-item" title="插入图片">
          <q-icon name="mdi-tooltip-image-outline" />图片
        </span> -->
        <!-- <span class="tool-item" title="插入超链接">
          <i class="fa fa-link" aria-hidden="true"></i> 链接
        </span> -->
        <span class="tool-item" title="插入代码段" @click="insertCode()">
          <q-icon name="mdi-code-tags" />代码
        </span>
      </div>

      <!-- class="z-submit z-btn" -->

      <div class="z-submit">
        <q-btn
          size="12px"
          icon="mdi-share"
          color="primary"
          label="提交评论"
          :loading="posting"
          :disable="disabled"
          @click.prevent="handleSubmit"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import vueEmoji from '../common/emoji/emoji.vue';
import autoTextarea from '../common/autoTextarea/autoTextarea.vue';
import emojiHelper from '../common/emoji/emojiHelper';
import { markdownToHTML } from 'src/transform/markdown';
import { Visitor } from 'src/models/visitor';
import mixin from './mixin';

@Component<commentPen>({
  components: {
    vueEmoji,
    autoTextarea
  },
  mounted() {
    if (this.$store.state.visitor.data) {
      this.visitor = { ...this.$store.state.visitor.data };
    }
  }
})
export default class commentPen extends mixins(mixin) {
  private mode: string = 'edit'; //'preview'

  private showCommentEmoji: boolean = false;

  private previewContent: string = ''; //预览

  //显示
  @Prop({ type: String, required: false, default: '' })
  contentValue!: '';

  inputValue: string = this.contentValue;

  visitor: any = { nickName: '', site: '', mail: '' };

  user: any = { name: '', avatar: '' };
  // @Emit("submit")

  public closeEmoji() {
    this.showCommentEmoji = false;
  }
  public emojiSelected(emoji: any) {
    this.inputValue += emoji;
    this.closeEmoji();
  }

  get placeHolder() {
    if (this.commentPenPosition.quote)
      return '@' + this.commentPenPosition.quote.author;
    return '支持Markdown';
  }

  get disabled(): boolean {
    return this.$store.getters['comment/disabled'] || !this.inputValue;
  }
  get posting(): boolean {
    return this.$store.state.comment.posting;
  }

  @Watch('inputValue')
  onContentValueChanged(newValue: string, oldValue: string) {
    this.$store.commit('comment/SetInput', newValue);
  }

  @Watch('mode')
  onModeChanged(newVal: string) {
    if (newVal == 'preview') {
      this.previewContent = emojiHelper.emoji(this.inputValue);
      this.previewContent = markdownToHTML(this.previewContent);
      this.$nextTick(() => {
        this.$prism.highlightAll();
      });
    }
  }

  get postContent(): string {
    return this.$store.state.comment.postContent;
  }

  @Watch('postContent')
  onValueChanged(newValue: string, oldValue: string) {
    // var marked = markdownToHTML(newValue);
    this.inputValue = this.$store.state.comment.postContent;
  }
  // get userProfile() {
  //   return this.$store.getters['login/userProfile'];
  // }

  // @Watch('userProfile')
  // userChanged(newValue: any, oldValue: any) {
  //   this.user = { ...newValue };
  //   this.visitor.avatar = this.user.avatar;
  //   this.visitor.nickName = this.user.name;
  // }
  public insertCode() {
    this.inputValue += '\n```javascript\n\n```\n';
  }

  public editProfile() {
    this.visitor.edit = !this.visitor.edit;
    this.$store.commit('visitor/setVisitor', this.visitor);
  }
  public handleSubmit() {
    if (this.$store.getters['login/userProfile']) {
      this.user = { ...this.$store.getters['login/userProfile'] };
    }

    let err = '';
    err = !this.user.name ? '请先登录' : !this.inputValue ? '说点什么吧！' : '';
    if (err) {
      this.$q.notify({
        type: 'warning',
        message: err,
        position: 'top'
      });

      return;
    }
    // this.$store.state.visitor.status=true;

    this.visitor.edit = false;
    this.$store.commit('visitor/setVisitor', { ...this.visitor });
    this.$root.$emit('submitComment', this.inputValue);
  }
}
</script>

<style lang="scss" scoped>
@import 'src/css/markdown.scss';
.comment-pen {
  background: var(--module-bg);
  margin: 1rem 0;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  .close-btn {
    display: none;
  }
  .profile {
    display: block;
    text-align: right;

    .profile-setting {
      padding: 5px 10px;
      .name {
        margin-right: 2px;
      }
      .setting {
        font-size: 12px;
        cursor: pointer;
      }
    }

    margin: 5px;
  }
  .z-head {
    color: var(--text-color);
    border-radius: 6px 6px 0 0;
    padding: 10px 10px 0px 10px;
  }
  .z-body {
    background: var(--bg-white);
    padding: 10px;
    .cu-input-wrapper {
      min-height: 120px;
    }
    ::v-deep .z-input {
      // max-height: 300px;
      min-height: 115px;
      padding: 8px;
      line-height: 1.5;
      width: 100%;
      outline: none;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      &:focus {
        border-color: rgb(3, 102, 214);
        box-shadow: 0 0 0 1.5px rgba(3, 102, 214, 0.3);
      }
    }

    .z-preview {
      min-height: 120px;
      .preview-content {
        overflow: hidden;
        padding: 10px 5px;
        white-space: pre-wrap;
        ::v-deep .emoji-img {
          width: 30px;
        }
      }
    }
  }
  .z-footer {
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    padding: 8px 10px;
    padding-bottom: 15px;
    .toolbox {
      float: left;
      border-right: 1px solid var(--border-color);
      .tool-item {
        display: inline-block;
        padding: 6px;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .z-submit {
      float: right;
      border: none;
      .fa {
        margin-right: 2px;
      }
    }
  }
}
@media screen and (max-width: 500px) {
  .comment-pen {
    .close-btn {
      display: none;
    }
    .profile {
      .profile-input {
        display: block;
      }
    }
  }
}
</style>
<style lang="scss">
@media screen and (max-width: 500px) {
  .comment-item {
    .close-btn {
      display: block !important;
      span {
        float: right;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .comment-pen {
      position: fixed;
      width: 90%;
      left: 50%;
      bottom: 0;
      margin: 0;
      padding: 20px;
      transform: translateX(-50%);
      z-index: 100;
      box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.2);
      .profile {
        display: block;
        .z-input {
          display: block;
        }
      }
    }
  }
}
</style>
